<template>
  <el-scrollbar ref="emojisBox" v-if="isShowEmojisBox" class="emojis_box" tag="div">
    <el-image
      v-for="(item, index) in emojis.maps"
      :src="emojis.path + item"
      :key="index"
      class="emoji"
      fit="fit"
      @click="onCheckedEmojiItem(index)"
    />
  </el-scrollbar>
</template>
<script setup>
import { ref } from "vue";
import { emojis } from "./emoji.js";
const emit = defineEmits(["appendEmoji"]);
const isShowEmojisBox = ref(false);
const handleShowEmojisBox = ({ isShow }) => {
  if (isShow) {
    isShowEmojisBox.value = true;
  } else {
    isShowEmojisBox.value = false;
  }
};
const onCheckedEmojiItem = emoji => emit("appendEmoji", emoji);

defineExpose({
  handleShowEmojisBox
});
</script>
<style lang="scss" scoped>
.emojis_box {
  position: absolute;
  top: -180px;
  left: 15px;
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 150px;
  padding: 15px 5px 0;
  background: #ffffff;
  border-radius: 5px;
  .emoji_item {
    display: flex;
    flex-wrap: wrap;
  }
  .emoji {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
